<template>
  <el-dialog
    modal-class="payment-plan-dialog"
    v-model="_isOpen"
    width="1200"
    align-center
    :show-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="cancelClick"
  >
    <template #header>
      <h4 class="f18"><i class="icon"></i>订单收款计划节点明细</h4>
    </template>
    <template #default>
      <div class="head-info f16 jzt-flex-bt mb20">
        <p>
          <span class="jzt-block mr20">
            <span>订单总额应收金额：</span><b class="red">¥{{ optionInfo.detail.payPlanAmount }}</b>
          </span>
          <span>
            <span>税额：</span><b>¥{{ optionInfo.detail.invoiceAmount }}</b>
          </span>
        </p>
        <!-- <p>
          对账人姓名/电话：{{ optionInfo.detail.reconciliationName || "-" }} {{ optionInfo.detail.reconciliationMobile || "-" }}
        </p> -->
      </div>
      <div class="time-line-wrap">
        <template v-if="optionInfo.detail?.payPlanList?.length > 0">
          <div class="time-line-item" v-for="(item, index) in optionInfo.detail?.payPlanList" :key="index">
            <div class="label">{{ item.collectionType }}期款项</div>
            <div class="content pl82 pt20 pb20">
              <div class="info pl20 pr20">
                <header class="jzt-flex-bt">
                  <b>{{ getNodeName(item.collectionNode) }}</b>
                  <!-- <el-button type="primary" link>催收</el-button> -->
                </header>
                <p class="price-wrap f14">
                  <span>平台支付时效：{{ item.collectionCycle }}</span>
                  <span>收款节点日期：{{ item.planPurchaseTime }}</span>
                  <span>计划收款日期：{{ item.planPaymentTime }}</span>
                  <span>收款比例：{{ item.collectionScale }}%</span>
                </p>
                <p class="price-wrap f14">
                  <span>计划应收金额：¥{{ item.payableAmount }}</span>
                  <span>冻结金额：¥{{ item.freezeAmount }}</span>
                  <span>实际收款金额：¥{{ item.realityPayableAmount }}</span>
                  <span>计划剩余金额：¥{{ item.surplusPayableAmount }}</span>
                </p>
              </div>

              <div class="icon">
                <div>
                  <div class="circle" :class="{ active: item.isExecute === 1 }"></div>
                  <div class="line" :class="{ active: item.isExecute === 1 }"></div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <el-empty v-else description="这里暂时什么都没有"></el-empty>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";
import {
  getFolder,
  _debounce //防抖，多次频繁触发时，只执行最后一次
} from "@/utils/index";
import { Search } from "@element-plus/icons-vue";

const isChainTenant = JSON.parse(localStorage.getItem("userinfo"))?.isChainTenant; //判断是否是加盟商
const emit = defineEmits(["update:isOpen", "changeAttr"]);
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  optionInfo: {
    type: Object,
    default: () => {
      return {
        detail: { payPlanList: [] }
      };
    }
  }
});

watch(
  () => props.optionInfo,
  val => {
    console.log("传递过来的详情", val);
    // form.value.name = val.detail.name;
  },
  { deep: true, immediate: true }
);
const _isOpen = computed({
  get() {
    return props.isOpen;
  },
  set(value) {
    emit("update:isOpen", value);
  }
});

const getNodeName = val => {
  const arr = [
    { label: "接采购单即付款", val: 1 },
    { label: "生产完成确认", val: 2 },
    { label: "发货完成", val: 3 },
    { label: " 入库确认", val: 4 },
    { label: "配送完成确认", val: 5 },
    { label: "安装完成确认", val: 6 }
  ];
  const obj = arr.find(item => item.val === val);
  return obj?.label || "-";
};

const cancelClick = () => {
  console.log(9090909090);
  _isOpen.value = false;
};
defineExpose({});
</script>

<style lang="scss">
.payment-plan-dialog {
  .el-dialog {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    .el-dialog__header {
      border-bottom: 1px solid #e2e8f0;
      padding: 0 24px 20px 24px;
      .icon {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #409eff;
        margin-right: 8px;
        margin-bottom: 3px;
      }
    }
    .el-dialog__body {
      padding: 20px;
      .el-form-item {
        width: 100%;
      }
    }
    .el-dialog__footer {
      padding-top: 0;
      text-align: center;
    }
  }
  .dialog-footer {
    // box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
<style lang="scss" scoped>
.head-info {
  color: #3d3d3d;
  span > span {
    color: #86909c;
  }
  span > b.red {
    color: #ff3333;
  }
}
.time-line-wrap {
  max-height: 500px;
  overflow-y: auto;
  .price-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .time-line-item {
    .label {
      line-height: 32px;
      width: 100px;
      background-color: #d0e7ff;
      color: #007dff;
      text-align: center;
      border-radius: 4px;
    }
    .content {
      position: relative;
      .info {
        background: #f2f3f5;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #dfe5f1;
        header {
          line-height: 44px;
          border-bottom: 1px solid #dfe5f1;
          & > b {
            display: inline-block;
            padding-left: 12px;
            position: relative;
          }
          & > b::before {
            position: absolute;
            content: "";
            width: 4px;
            height: 16px;
            background-color: #007dff;
            border-radius: 2px 2px 2px 2px;
            top: 14px;
            left: 0;
          }
        }
        & > p {
          padding: 18px 0;
        }
      }
      .icon {
        position: absolute;
        left: 32px;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        & > div {
          height: 100%;
          position: relative;
          background-color: gray;
        }
        .circle {
          position: absolute;
          top: calc(50% - 12px);
          width: 24px;
          height: 24px;
          border-radius: 50%;
          border: 1px solid #dfe5f1;
          box-sizing: border-box;
          background-color: white;
          z-index: 2;
          &.active {
            background: url("@/assets/images/payment/active.png");
            background-size: cover;
            background-color: white;
            border: none;
          }
        }
        .line {
          position: absolute;
          width: 1px;
          height: 100%;
          background-color: #5a83b580;
          top: 0;
          left: 12px;
          z-index: 1;
          &.active {
            width: 2px;
            left: 11px;
            background-color: #007dff;
          }
        }
      }
    }
  }
}
.el-button--primary {
  border: none;
}
.el-button.el-button--info {
  --el-color-info: #f2f3f5;
  --el-color-white: #1d2129;
  &:hover {
    --el-button-hover-bg-color: #f2f3f5 !important;
    border-color: #f2f3f5 !important;
  }
}
</style>
